<template>
  <div class="panel">
    <div v-if="limit == '1'" class="panel1">
      <div class="panel-bar" v-if="isReload">
        <echart-bar class="panel-bar-item" :options="barOptions" />
      </div>
      <div class="panel-bar" v-if="isReload">
        <echart-bar class="panel-bar-item" :options="barOptions2" />
      </div>
      <div class="panel-bar" v-if="isReload">
        <echart-bar class="panel-bar-item" :options="barOptions3" />
      </div>
      <div class="panel-bar" v-if="isReload">
        <echart-bar class="panel-bar-item" :options="barOptions4" />
      </div>
      <!-- <div class="panel-bar" style="padding: 0 10px">
        <div class="panel-bar-title">项目清单</div>
        <div class="panel-bar-firstline">
          <div style="width: 30%">项目名称</div>
          <div style="width: 16%">预算金额(万元)</div>
          <div style="width: 16%">项目金额(万元)</div>
          <div style="width: 20%">立项日期</div>
          <div style="width: 18%">立项部门</div>
        </div>
        <div class="panel-bar-line" v-for="item in projectInfo" :key="item">
          <div style="width: 30%; text-align: left">{{ item.name }}</div>
          <div style="width: 16%; text-align: center">{{ item.plan }}</div>
          <div style="width: 16%; text-align: center">{{ item.sum }}</div>
          <div style="width: 20%; text-align: center">{{ item.dt }}</div>
          <div style="width: 18%; text-align: center">{{ item.depart }}</div>
        </div>
      </div> -->
    </div>
    <div v-else-if="limit == '2'" class="panel2">
      <div class="panel-bar" v-if="isReload">
        <echart-bar class="panel-bar-item" :options="barOptions" />
      </div>
      <div class="panel-bar" v-if="isReload">
        <echart-bar class="panel-bar-item" :options="barOptions2" />
      </div>
      <!-- <div class="panel-bar" style="padding: 0 10px">
        <div class="panel-bar-title">项目清单</div>
        <div class="panel-bar-firstline">
          <div style="width: 30%">项目名称</div>
          <div style="width: 16%">预算金额(万元)</div>
          <div style="width: 16%">项目金额(万元)</div>
          <div style="width: 20%">立项日期</div>
          <div style="width: 18%">立项部门</div>
        </div>
        <div class="panel-bar-line" v-for="item in projectInfo" :key="item">
          <div style="width: 30%; text-align: left">{{ item.name }}</div>
          <div style="width: 16%; text-align: center">{{ item.plan }}</div>
          <div style="width: 16%; text-align: center">{{ item.sum }}</div>
          <div style="width: 20%; text-align: center">{{ item.dt }}</div>
          <div style="width: 18%; text-align: center">{{ item.depart }}</div>
        </div>
      </div> -->
    </div>
    <div v-else-if="limit == '3'" class="panel3">
      <div class="panel-bar" style="padding: 0 10px">
        <div class="panel-bar-title">销售合同清单</div>
        <div class="panel-bar-firstline">
          <div style="width: 25%">合同编号</div>
          <div style="width: 37.5%">销售合同名称</div>
          <div style="width: 12.5%">合同总额(元)</div>
          <div style="width: 12.5%">发货完成率</div>
          <div style="width: 12.5%">发货完成率</div>
        </div>
        <div class="panel-bar-line" v-for="item in xsqdInfo" :key="item">
          <div style="width: 25%; text-align: center">{{ item.code }}</div>
          <div style="width: 50%; text-align: left">{{ item.name }}</div>
          <div style="width: 12.5%; text-align: center">{{ item.contractTotal }}</div>
          <div style="width: 12.5%; text-align: center">{{ item.deliveryRate }}</div>
          <div style="width: 12.5%; text-align: center">{{ item.receiveRate }}</div>
        </div>
      </div>
    </div>
    <div v-else-if="limit == '4'" class="panel4">
      <iframe
        :src="userInfo.src4"
      ></iframe>
    </div>
    <div v-else class="panel4">
      <iframe
        :src="userInfo.src5"
      ></iframe>
    </div>
    <!-- <div v-else class="panel4">
      <iframe
        src="http://218.93.120.220:28888/webroot/decision?fine_username=1121"
      ></iframe>
    </div> -->
    <!-- <div class="panel-footer">
      <div class="panel-footer-item panel-footer-item-current">
        <img class="panel-footer-item-icon" src="./首页.png" />
        <span class="panel-footer-item-text">首页</span>
      </div>
      <div class="panel-footer-item" @click="clickPage(1)">
        <img class="panel-footer-item-icon" src="./应用中心.png" />
        <span class="panel-footer-item-text">应用中心</span>
      </div>
      <div class="panel-footer-item" @click="clickPage(2)">
        <img class="panel-footer-item-icon" src="./我的.png" />
        <span class="panel-footer-item-text">我的</span>
      </div>
    </div> -->
    <div style="position: absolute; top: 0; right: 0">
      <button
        v-show="limitList.indexOf(1)>=0"
        :class="limit == '1' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '1';
          this.reload();
        "
      >
        1
      </button>
      <button
        v-show="limitList.indexOf(2)>=0"
        :class="limit == '2' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '2';
          this.reload();
        "
      >
        2
      </button>
      <button 
        v-show="limitList.indexOf(3)>=0"
        :class="limit == '3' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '3';
          this.reload();
        "
      >
        3
      </button>
      <button 
        v-show="limitList.indexOf(4)>=0"
        :class="limit == '4' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '4';
          this.reload();
        "
      > 4
      </button>
      <button
        v-show="limitList.indexOf(5)>=0"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '5';
          this.reload();
        "
      >
        5
      </button>
      <!-- <button v-if="[4,5].includes(limit)"
        :class="limit == '4' ? 'currentBtn' : ''"
        style="border: 1px solid #ccc; padding: 10px 20px"
        @click="
          limit = '5';
          this.reload();
        "
      > 5
      </button> -->
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Model } from "vue-property-decorator";
import OAuthApi from "@/apis/oauth";
import env from "@/config/env";
import { utils } from "@cloudpivot/common";
import { Modal, Input, Select } from "@h3/antd-vue";
import EchartBar from "./bar2.vue";
import Axios from "axios";
import { homeApi, userApi } from "@cloudpivot/api";

@Component({
  name: "charts-demo",
  components: {
    EchartBar,
  },
})
export default class Home extends Vue {
  homeData: any = {
    notice: "恭喜xxx在本月第二次中标！",
    bidding: 15,
    win: 25,
    unfinished: 35,
    finished: 40,
    unfinishedOrder: 45,
    finishedOrder: 50,
  };
  userInfo = {
    img: "./头像.png",
    name: "Admin",
    employeeNo: "Admin",
    src4: '',
    src5: ''
  };

  limit = 1;
  limitList = [];

  isReload: boolean = true;

  projectInfo = [];
  xsqdInfo = [];

  barOptions: Charts.BarOptions = {
    chartTitle: "各项目预算登记表（Top10）",
    subTitle: "单位/万元",
    x: [],
    series: [],
  };

  barOptions2: Charts.PieOptions = {
    chartTitle: "各项目金额使用情况表（Top10）",
    subTitle: "单位/万元",
    x: [],
    series: [],
  };

  barOptions3: Charts.PieOptions = {
    chartTitle: "各部门预算使用情况登记表",
    subTitle: "单位/万元",
    x: [],
    series: [],
  };

  barOptions4: Charts.PieOptions = {
    chartTitle: "各部门金额使用情况表",
    subTitle: "单位/万元",
    x: [],
    series: [],
  };

  clickPage(index: number) {
    alert(index);
  }

  reload() {
    this.isReload = false;
    this.$nextTick(function () {
      this.isReload = true;
    });
  }

  async created() {
    let user: any = window.sessionStorage.getItem("user");
    if (user) {
      user = JSON.parse(user);
    } else {
      user = { id: "", name: "" };
    }
    var userinfo: any = await userApi.getUserInfo(user.id);

    if (userinfo.data) {
      this.userInfo = {
        img: userinfo.data.imgUrl == null ? "./头像.png" : userinfo.data.imgUrl,
        name: userinfo.data.name,
        employeeNo: userinfo.data.employeeNo,
        src4: 'http://218.93.120.220:28888/webroot/decision/view/form?viewlet=%25E9%2594%2580%25E5%2594%25AE%25E5%2590%2588%25E5%2590%258C%25E9%25A6%2596%25E9%25A1%25B5%252F%25E9%2594%2580%25E5%2594%25AE%25E5%2590%2588%25E5%2590%258C%25E9%25A6%2596%25E9%25A1%25B5.frm&op=h5#/form',
        src5: 'http://218.93.120.220:28888/webroot/decision?fine_username=' + userinfo.data.employeeNo
      };
    }
    let that = this;

    // await Axios.get(
    //   "/api/contractmgt/getType?id=" + user.id
    // ).then((res: any) => {
    //   debugger;
    //   if (res.errcode != "0") {
    //     //alert("获取权限类型失败");
    //   } else if (res.errmsg == "无数据") {
    //     //alert("权限类型无数据");
    //   } else {
    //     that.limit = res.data + "";
    //   }
    // });
    
    await Axios.get("/api/contractmgt/getYeQianPermissions?userId=" + user.id).then(
      (res: any) => {
        debugger;
          that.limit = res.moren;
          that.limitList = res.quanxian;
      }
    );
    that.limitList = [1,2,3,4,5]

    await Axios.get(
      "/api/contractmgt/xmysdjb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        //alert("各部门项目预算登记预算表获取失败");
      } else if (res.errmsg == "无数据") {
        //alert("各部门项目预算登记预算表无数据");
      } else {
        that.barOptions.x = [];
        that.barOptions.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "各项目预算登记表（Top10）",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          debugger;
          that.barOptions.x.push(res.data[item].YSXiangMu);
          series1.data.push(res.data[item].YuSuanNumber);
        }
        that.barOptions.series.push(series1);
        that.reload();
      }
    });

    await Axios.get(
      "/api/contractmgt/xmjesyqkb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        //alert("各部门项目金额使用情况获取失败");
      } else if (res.errmsg == "无数据") {
        //alert("各部门项目金额使用情况无数据");
      } else {
        that.barOptions2.x = [];
        that.barOptions2.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "各项目金额使用情况表（Top10）",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          that.barOptions2.x.push(res.data[item].projectName);
          series1.data.push(res.data[item].amount);
        }
        that.barOptions2.series.push(series1);
        that.reload();
      }
    });

    // await Axios.get(
    //   "/api/contractmgt/xmqd?id=" +
    //     user.id +
    //     "&qxType=" +
    //     that.limit
    // ).then((res: any) => {
    //   debugger;
    //   if (res.errcode != "0") {
    //     //alert("项目清单获取失败");
    //   } else {
    //     that.projectInfo = [];
    //     for (var item in res.data) {
    //       that.projectInfo.push({
    //         id: "1",
    //         name: res.data[item].YSXiangMu,
    //         plan: res.data[item].YuSuanNumber,
    //         sum: res.data[item].registerMomery,
    //         dt: res.data[item].recordDate,
    //         state: res.data[item].xmzt,
    //         depart: res.data[item].applyDepartment,
    //         link: "",
    //       });
    //     }
    //     that.reload();
    //   }
    // });
    await Axios.get(
      "/api/contractmgt/getXsht?userId=" + user.id + "&qxType=" + that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        alert("销售清单获取失败");
      } else {
        that.xsqdInfo = [];
        for (var item in res.data) {
          that.xsqdInfo.push({
            id: item,
            name: res.data[item].KHMCBT,
            code: res.data[item].HTBH,
            contractTotal: res.data[item].contractTotal,
            deliveryRate: res.data[item].deliveryRate,
            receiveRate : res.data[item].receiveRate ,
            link: res.data[item].url,
          });
        }
        that.reload();
      }
    });

    await Axios.get(
      "/api/contractmgt/gbmyssyqkdjb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        //alert("各部门预算预算使用情况登记表获取失败");
      } else if (res.errmsg == "无数据") {
        //alert("各部门预算预算使用情况登记表获取无数据");
      } else {
        that.barOptions3.x = [];
        that.barOptions3.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "部门预算预算使用情况登记",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          that.barOptions3.x.push(res.data[item].bmmc);
          series1.data.push(res.data[item].bmysze);
        }
        that.barOptions3.series.push(series1);
        that.reload();
      }
    });

    await Axios.get(
      "/api/contractmgt/gbmjesyqkb?id=" +
        user.id +
        "&qxType=" +
        that.limit
    ).then((res: any) => {
      debugger;
      if (res.errcode != "0") {
        //alert("各部门金额使用情况表获取失败");
      } else if (res.errmsg == "无数据") {
        //alert("各部门金额使用情况表获取无数据");
      } else {
        that.barOptions4.x = [];
        that.barOptions4.series = [];
        let series1 = {
          data: [],
          type: "bar",
          stack: "one",
          name: "部门金额使用情况",
          color: "#54A0F8",
        };
        for (var item in res.data) {
          that.barOptions4.x.push(res.data[item].name);
          series1.data.push(res.data[item].usedMoney);
        }
        that.barOptions4.series.push(series1);
        that.reload();
      }
    });
  }
}
</script>

<style lang="less" scoped>
.currentBtn {
  background-color: #ccc;
}

.panel {
  width: 100vw;
  height: 100%;
  padding-bottom: 60px;
  background-color: transparent;
  overflow: auto;

  .panel1 {
    padding: 10px;
    .panel-bar {
      background-color: #fff;
      margin: 15px 0 15px 0;
      border-top: 4px solid #98beff;
      border-radius: 5px;
      padding: 15px 0;

      .panel-bar-item {
        width: 100%;
        height: 300px;
      }
      .panel-bar-title {
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        padding: 18px 14px;
      }

      .panel-bar-firstline {
        color: #5a6379;
        background-color: #f5f8ff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15px 10px;

        div {
          text-align: left;
          font-size: 10px;
        }
      }

      .panel-bar-line {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15px 10px;
        border-bottom: 1px solid #e9edf9;
        div {
          text-align: left;
          font-size: 10px;
        }
      }
    }
  }

  .panel2 {
    padding: 10px;
    .panel-bar {
      padding: 15px 0;
      background-color: #fff;
      margin: 15px 0 15px 0;
      border-top: 4px solid #98beff;
      border-radius: 5px;

      .panel-bar-item {
        width: 100%;
        height: 300px;
      }
      .panel-bar-title {
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        padding: 18px 14px;
      }

      .panel-bar-firstline {
        color: #5a6379;
        background-color: #f5f8ff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15px 10px;

        div {
          text-align: left;
          font-size: 10px;
        }
      }

      .panel-bar-line {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15px 10px;
        border-bottom: 1px solid #e9edf9;
        div {
          text-align: left;
          font-size: 10px;
        }
      }
    }
  }

  .panel3 {
    padding: 10px;
    .panel-bar {
      padding: 15px 0;
      background-color: #fff;
      margin: 15px 0 15px 0;
      border-top: 4px solid #98beff;
      border-radius: 5px;

      .panel-bar-title {
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        padding: 18px 14px;
      }

      .panel-bar-firstline {
        color: #5a6379;
        background-color: #f5f8ff;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15px 10px;

        div {
          text-align: left;
          font-size: 10px;
        }
      }

      .panel-bar-line {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding: 15px 10px;
        border-bottom: 1px solid #e9edf9;
        div {
          text-align: left;
          font-size: 10px;
        }
      }
    }
  }

  .panel4 {
    padding: 10px;
    height: calc(100vh - 70px);
    iframe {
      width: calc(100vw - 20px);
      height: calc(100vh - 70px);
      border: none;
    }
  }

  .panel-footer {
    background-color: #fff;
    width: 100vw;
    height: 49px;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .panel-footer-item {
      width: 33.3%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;

      .panel-footer-item-icon {
        width: 20px;
        height: 20px;
        margin-bottom: 2px;
      }

      .panel-footer-item-text {
        color: #7f7f7f;
        font-size: 11px;
      }
    }

    .panel-footer-item-current {
      .panel-footer-item-text {
        color: #4683eb;
      }
    }
  }
}
</style>